import React from 'react';
import ReactDOM from 'react-dom';
import u from '../common.js';
import { Link } from 'react-router-dom'
import Pop from './popup.jsx';
import { Pagination,Modal,Button } from 'antd';
import '../static/tero/table.less';
import '../static/app.less';
import $ from 'jquery'
import Disposal from './disposal';
let query = document.querySelector.bind(document)
let queryAll = document.querySelectorAll.bind(document)
document.onselectstart = function () { return false; };
class Table extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 1,
            display: 'none',
            list: [{ index: 1, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 2, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 3, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 4, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 5, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 6, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 7, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 8, flag: false, num: false, flag2: false, num2: false, gray: false }],
            flag: false,
            number: null,       //控制打开哪一个表格每行的弹框
            down: true,            //
            numflag: true,        //控制表格研判及箭头的弹出框
            operation: [],       //表格上方ul
            sentenceFlag: false, //表格上方研判按钮的弹出框flag
            grayIndex: 0,
            detail: [],
            num: null,
            currentCount: 0,
            newSearchDetail: [],
            pageSize: 10,
            visible: false,
            visible2: false,
            visible3: false,
            total: null,
            idBlack: null,
            idWhite: null,
            idUndetermined: null
        }
    }
    toogleClass() {
        var that = this;
        $(() => {
            $('.down_td').css('width', $('.table').outerWidth() + 'px')
            $(window).resize(() => {
                $('.down_td').css('width', $('.table').outerWidth() + 'px')
            })
            $('.app-top>ul>li').click(function () {
                if ($(this).text().includes("：")) return;
                if ($(this).index() == 5) {
                    $(this).siblings().css({ 'border': 'none', 'color': '#30383e' })
                    return
                };
                $(this).css({ 'border': '1px solid #5286ff', 'color': '#5286ff' }).siblings().css({ 'border': 'none', 'color': '#30383e' }) //头部样式的切换
            })
            $('.app-conter-top>ul>li:nth-of-type(1)').removeClass('active').addClass('active_app')


            $(".app-conter-top>ul>li").click(function () {
                $(this).addClass('active_app').siblings().removeClass('active_app') //表格上方ul的切换
            })
        })
    }
    componentDidMount() {
        if (this.props.baten === 'capture') {
            this.snatchAt ()
        }
        if (this.props.baten === 'disposal') {
            this.snatchAt ()
        }
    }

    // 数据抓取
    snatchAt () {
        u.getMessage({
            "currentCount": this.state.currentCount === 0? this.state.currentCount:(this.state.currentCount-1)*10 +1,
            "pageSize": this.state.pageSize
        },data => {
            this.setState({
                detail: data.indexList,
                total: data.total
            })
        })
    } 

    onChangeSize = (page) => {
        console.log(page);
        this.setState({
            currentCount: page
        },() =>{
            if (this.props.searchDetil.length > 0) {
                u.searchMessage({
                    "content": this.props.content,
                    "source": this.props.source,
                    "publish_time": this.props.publishTime,
                    "endTime": this.props.endTime,
                    "currentCount": this.state.currentCount === 0? this.state.currentCount:(this.state.currentCount-1)*10 +1,
                    "pageSize": this.state.pageSize,
                  },data => {
                    this.setState({
                        newSearchDetail: data.indexListByCondition,
                        total: data.total
                    })
                  })
            } else {
                this.snatchAt()
            }
        })
      }

    toggleAll() {   //全选的切换
        this.setState({
            flag: !this.state.flag
        })
        let arr = this.state.list.slice(0)
        arr.forEach((item, index) => {
            arr[index].flag = !this.state.flag
        })
        this.setState({
            list: arr
        })
    }
    toogle(index) { //单个的切换
        console.log(index)
        let arr = this.state.list.slice(0);
        arr[index].flag = !arr[index].flag;
        arr.some((item) => {
            return !item.flag
        }) ? this.setState({
            flag: false
        }) : this.setState({
            flag: true
        })
        this.setState({
            list: arr
        })
    }
    pop(index, number) { //控制打开pop遮罩弹框的类型
        console.log(index, number)
        this.setState({
            index: index,
            display: 'block',
            grayIndex: number
        })
        setTimeout(() => {
            this.setState({
                index: index,
                display: 'block',
                grayIndex: number
            })
        })
    }
    popProp(val, number, index) { // 用来关闭遮罩弹框
        this.setState({
            display: val
        })
        if (number == 8) {
            if (index) {
                // let arr = this.state.list.slice(0);
                // arr[index].gray = true;
                // this.setState({
                //     list:arr
                // })
                $('.table_list tr:eq(' + index + ')').css('color', '#9ba2ab')
            }
        }
    }
    down(index, num) { //控制table+-的内容显示及隐藏
        let arr = this.state.list.slice(0)
        arr[index].flag2 = !arr[index].flag2
        this.setState({
            list: arr
        })
    }
    leave(index) { //控制鼠标离开关闭弹出框
        if (index == -1) {
            this.setState({
                sentenceFlag: false
            })
        } else {
            let arr = this.state.list.slice(0);
            arr[index].num = false;
            arr[index].num2 = false;
            this.setState({
                list: arr
            })
        }

    }
    select() {
        return this.state.list.some((item, index) => {
            return item.flag
        })
    }

    onBlack () {
        if (this.props.warn) {
            console.log(1232131111)
        }
    }

    showModal = (id) => {
        this.setState({
            idBlack: id
        })
        this.setState({
          visible: true,
        });
      }
    
      handleOk = (e) => {
        u.blackId({
            id: this.state.idBlack
        },data => {
            console.log(data)
        })
        this.setState({
          visible: false,
        });
      }
    
      handleCancel = (e) => {
        console.log(2)
        this.setState({
          visible: false,
        });
      }

      showModal2 = (id) => {
          console.log(id)
        this.setState({
            idWhite: id
        })
        this.setState({
          visible2: true,
        });
      }
    
      handleOk2 = (e) => {
        u.whiteId({
            id: this.state.idWhite
        },data => {
            console.log(data)
        })
        this.setState({
          visible2: false,
        });
      }

      handleCancel2 = (e) => {
        this.setState({
          visible2: false,
        });
      }

      showModal3 = (id) => {
        console.log(id)
      this.setState({
          idUndetermined: id
      })
      this.setState({
        visible3: true,
      });
    }
  
    handleOk3 = (e) => {
      u.isUndetermined({
          id: this.state.idUndetermined
      },data => {
          console.log(data)
      })
      this.setState({
        visible3: false,
      });
    }

    handleCancel3 = (e) => {
      this.setState({
        visible3: false,
      });
    }

    render() {
        return (
            <div className='table'>

            <Modal
                title="判黑"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                >
                <p>确定判黑吗？</p>
            </Modal>

            <Modal
                title="判白"
                visible={this.state.visible2}
                onOk={this.handleOk2}
                onCancel={this.handleCancel2}
                >
                <p>确定判白吗？</p>
            </Modal>

            <Modal
                title="待定"
                visible={this.state.visible3}
                onOk={this.handleOk3}
                onCancel={this.handleCancel3}
                >
                <p>确定待定吗？</p>
            </Modal>

                <Pop index={this.state.index} display={this.state.display} colse={this.popProp.bind(this)} num={this.state.grayIndex} />
                <div className='app-conter' style={{ padding: '0px' }}>
                {this.props.baten !== 'disposal' ? <div className={ this.props.baten === 'capture' ? 'countStyle' : ''}>
                        <p>共搜索到 <span>{this.state.total}</span> 条数据</p>
                        <div className='app-conter-div'>
                            <img src={require("../static/image/blueTips.png")} />
                            <span> 已选择 4 项 </span>
                            <span className='app-conter-div-lastspan'
                                onClick={() => {
                                    this.select() ? this.pop(3) : this.pop(4)
                                }}
                            >清空</span>
                        </div>
                    </div> : '' } 
                    <div className='app-conter-box'>
                        <div className='app-conter-top'>
                            <ul>
                                {
                                    this.props.operation.map((item, index) => {
                                        return (item == '研判' ? <li key={index} style={{ position: 'relative' }} onMouseLeave={() => {
                                            this.leave(-1)
                                        }} onClick={() => {
                                            this.setState({
                                                sentenceFlag: !this.state.sentenceFlag
                                            })
                                        }}>{item}
                                            <div onMouseLeave={() => {
                                                this.leave(-1)
                                            }} className={this.state.sentenceFlag ? 'research_son_two active_table_two' : 'research_son_two'} ><p onClick={() => {
                                                this.pop(2)
                                            }}>案件</p><p className='active_poptable' onClick={() => {
                                                this.pop(9)

                                            }}
                                            >舆情</p>
                                                <p onClick={() => {
                                                    this.pop(10)

                                                }}
                                                >情报</p></div>
                                        </li> : <li key={index} className="borderStyle"
                                            onClick={() => {
                                                if (this.select()) {
                                                    switch (item) {
                                                        case '导出':
                                                            this.pop(7)
                                                            break;
                                                        case '删除':
                                                            this.pop(1)
                                                            break;
                                                        case '加入样本库':
                                                            this.pop(5)
                                                            break;
                                                        case '标记已阅':
                                                            this.pop(8)
                                                            break;
                                                        default:
                                                            break;
                                                    }
                                                } else {
                                                    this.pop(4)
                                                }

                                            }}
                                        >{item}</li>)
                                    })
                                }
                            </ul>

                        </div>
                        <div>

                        </div>
                    </div>

                    <table className='table_list'>
                        <tbody>
                            <tr className='activee'>
                                <td>
                                    {/* <span className={this.state.flag ? 'active' : ''} onClick={() => {
                                    this.toggleAll()}}></span> */}
                                </td>
                                <td>编号</td>
                                <td>{this.props.baten === 'keywords' ? '关键词名' : this.props.baten === 'disposal'? '标题' : '网址'}</td>
                                <td>{this.props.baten === 'keywords' ? '关键词组' : '内容'}</td>
                                <td className="table_W">{this.props.baten === 'keywords' ? '' : this.props.baten === 'disposal'? <div>
                                    <span className='left'>处置时间</span><div className='tip'><span className='top'>
                                    <img src={require('../static/image/table_up.png')} alt="" /></span>
                                    <span className='bottom'>
                                    <img src={require('../static/image/table_down.png')} alt="" />
                                    </span></div></div> : '关键词'}
                                </td>
                                {/* <td>{this.props.baten === 'keywords' ? '' : <div><span className='left'>处置时间</span><div className='tip'><span className='top'><img src={require('../static/image/table_up.png')} alt="" /></span><span className='bottom'><img src={require('../static/image/table_down.png')} alt="" /></span></div></div>}                    */}
                                                
                                {/* </td> */}
                                <td>{this.props.baten === 'keywords' ? '' : '来源'}</td>
                                <td><span className='left'>{this.props.baten === 'keywords' ? '操作' : '类型'}</span><div className='tip'><span className='top'><img src={require('../static/image/table_up.png')} /></span><span className='bottom'><img src={require('../static/image/table_down.png')} /></span></div></td>
                               
                            </tr>
                            {
                                (this.state.newSearchDetail.length>0? this.state.newSearchDetail : this.props.searchDetil.length > 0? this.props.searchDetil: this.state.detail)
                                // this.state.list
                               .map((item, index) => {
                                    return (
                                        <tr key={index} className={item.flag2 ? 'bottom_td' : ''}>
                                            <td >
                                                {/* <span className={item.flag ? 'active' : ''} onClick={() => {
                                                this.toogle(index)
                                            }}></span> */}
                                            {/* <span
                                                onClick={() => {
                                                    this.down(index)
                                                }}
                                            >{item.flag2 ? '-' : "+"}</span><div className={item.flag2 ? 'down_td last_tr down_pop' : 'down_td last_tr'}>
                                                    {this.props.baten ? 'མི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ་ཡིག་འགོ་བརྗོད་དུ་ཕྱོགས་མང་རིང་ལུགས་རྒྱུན་འཁྱོངས་བྱས་ནས་གོ་ལའི་བཅོས་སྐྱོང་འཐུས་སྒོ་ཚང་དུ་གཏོང་དགོས་ཞེས་པ་སྟེ་ཀྲུའུ་ཞི་ཞི་ཅིན་ཕིང་གི་འབོ་གསེར་རྒྱལ་ཁབ་བཟོ་ཚོང་གླེང་སྟེགས་ཀྱི་གལ་ཆེའི་གསུང་བཤད་ཐེངས་ལྔ་པ་ཞེས་པ་སྤེལ་བ།ཀྲུང་དབྱང་རླུང་འཕྲིན་ལས་ཁུངས་ནས་གནས་ཚུལ་སྤེལ་གསལ། སྤྱི་ཟླ་༧པའི་ཚེས་༣༡ཉིན། མི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ' +
                                                        '་ཡིག་འགོ་བམི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ་ཡིག་འགོ་བརྗོད་དུ་ཕྱོགས་མང་རིང་ལུགས་རྒྱུན་འཁྱོངས་བྱས་ནས་གོ་ལའི་བཅོས་སྐྱོང་འཐུས་སྒོ་ཚང་དུ་གཏོང་དགོས་ཞེས་པ་སྟེ་ཀྲུའུ་ཞི་ཞི་ཅིན་ཕིང་གི་འབོ་གསེར་རྒྱལ་ཁབ་བཟོ་ཚོང་གླེང་སྟེགས་ཀྱི་གལ་ཆེའི་གསུང་བཤད་ཐེངས་ལྔ་པ་ཞེས་པ་སྤེལ་བ' : '一些用户经常需要查看的，或横向对比的信息用户可以省去不断点击查看详情，再返回来查看的麻烦当然，这里的内容形式不只是表格，也可以是段落，信息组，甚至图表...一些用户经常需要查看的，或横向对比的信'
                                                        + '发生地方的发生的的丰富的是非官方的和规范'}
                                                </div> */}
                                                </td>
                                            <td>{this.state.currentCount ===0? index+1:(this.state.currentCount-1)*10 +index+1 }</td>
                                            <td><p>{this.props.baten == 'keywords' ? '数据监测' : this.props.baten == 'disposal'? '吃了烤面筋每天都开心' : item.account_url.split('/')[2]}</p></td>
                                            {/* <td>{this.props.baten == 'keywords' ? '数据监测' : '吃了烤面筋每天都开心'}</td> */}
                                            <td><p><Link to={{pathname:"/Postbar",state:{id:item.id}}}>{this.props.baten == 'keywords' ? '大数据、互联网、区块链' : this.props.baten == 'disposal'? '内容？内容引起极度舒适！牛肉面吃出一根头发' : item.content}</Link></p></td>
                                            {/* <td>{this.props.baten == 'keywords' ? '大数据、互联网、区块链' : '网易新闻App'}</td> */}
                                            <td>{this.props.baten == 'keywords' ? <div style={{width:'1px'}}></div> : item.keyWords}</td>
                                            <td>{this.props.baten == 'keywords' ? <div style={{width:'1px'}}></div> : item.source}</td>
                                            {/* <td>判黑</td> */}
                                            

                                            <td>{this.props.baten == 'keywords' ? <div>
                                                <span className='delete'>修改</span>
                                                <span className='look'>删除</span>
                                            </div> : this.props.baten == 'disposal'? '判黑' : <div>
                                                <span className='look' onClick={() => {this.showModal(item.id)}}>
                                                    判黑
                                                </span>
                                                {/* <span className='delete'>判白</span> */}
                                                <span className='delete' onClick={() => {this.showModal2(item.id)}}>
                                                    判白
                                                </span>
                                                {/* <span className='wait'>待定</span> */}
                                                <span className='wait' onClick={() => {this.showModal3(item.id)}}>
                                                    待定
                                                </span>
                                            </div>}

                                            {/* <td onMouseLeave={() => {
                                                this.leave(index)
                                            }}><span className='look'>删除</span><span className='delete' onClick={() => {
                                                this.pop(1)
                                            }}>修改</span> */}
                                            {/* <span className='research'><b onClick={() => {
                                                this.setState({
                                                    number: index,
                                                    numflag: true
                                                })
                                                item.num2 = false;
                                                item.num = !item.num
                                            }} >研判</b>
                                            {
                                                        item.num2 ? <img src={require('../static/image/up.png')} onMouseLeave={() => {

                                                        }} onClick={() => {
                                                            this.setState({
                                                                numflag: false
                                                            })
                                                            item.num = false;
                                                            item.num2 = !item.num2
                                                        }} alt="" /> : <img src={require('../static/image/down.png')} onMouseLeave={() => {

                                                        }} onClick={() => {
                                                            this.setState({
                                                                number: index,
                                                                numflag: false
                                                            })
                                                            item.num = false;
                                                            item.num2 = !item.num2
                                                        }}
                                                            alt="" />
                                                    }{
                                                        !this.state.numflag ? <div onMouseLeave={() => {
                                                            this.leave(index)
                                                        }} className={index == this.state.number && (item.num || item.num2) ? 'research_son active_table' : 'research_son'} ><p onClick={() => {
                                                            this.pop(0)


                                                        }}>加入样本</p><p className='active_poptable' onClick={() => {
                                                            this.pop(8, index)

                                                        }}
                                                        >标记已阅</p></div> : <div onMouseLeave={() => {
                                                            this.leave(index)
                                                        }} className={index == this.state.number && (item.num || item.num2) ? 'research_son active_table' : 'research_son'} ><p onClick={() => {
                                                            this.pop(2)


                                                        }}>案件</p><p className='active_poptable' onClick={() => {
                                                            this.pop(9)

                                                        }}
                                                        >舆情</p>
                                                                <p
                                                                    onClick={() => {
                                                                        this.pop(10)

                                                                    }}
                                                                >情报</p></div>
                                                    }
                                                    </span> */}

                                            </td>
                                        </tr>
                                    )
                                })
                            }

                        </tbody>
                    </table>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div className="fengYe">
                    <Pagination showQuickJumper showSizeChanger onChange={this.onChangeSize} defaultCurrent={1} total={this.props.totalNum?this.props.totalNum-1:this.state.total}/>
                </div>
            </div>
        )
    }
}

export default Table